<template>
    <div class="access">
        <div class="access-index">
            <img width="100%" style="display:block" src="/static/img/SAAS-main-01.jpg" alt="">
            <div class="access-index-search">
                <div class="access-index-search-title">
                    <span v-pmis="20" :class="[active ==1 ? 'activeColor': '','margin-right-10']" @click='activeStatus(1)'>房源</span>
                    <span v-pmis="29" :class="[active ==2 ? 'activeColor': '','margin-right-10']" @click='activeStatus(2)'>租客</span>
                  <!--   <span :class="[active ==3 ? 'activeColor': '','margin-right-10']" @click='activeStatus(3)'>设备</span> -->
                </div>
                <div class="access-index-search-input">
                    <Input v-pmis="20" v-model.trim="house" placeholder="房源地址/小区/房源编号" style="width:660px" v-show='active==1' @on-enter='searchHouse'><Button slot="append" icon="ios-search-strong" @click='searchHouse()'></Button></Input>
                    <Input v-pmis="29" v-model.trim="renter" placeholder="租客姓名/手机号" style="width:660px" v-show='active==2' @on-enter='searchRetenter'><Button slot="append" icon="ios-search-strong" @click='searchRetenter()'></Button></Input>
                    <!-- <Input v-model="device" placeholder="请输入设备" style="width:500px"  v-show='active==3'><Button slot="append" icon="ios-search"></Button></Input> -->
                </div>
            </div>
        </div>
        <div class="access-unusual" v-pmis="22">
            <ul class="access-unusual-ul">
                <li class="access-unusual-ul-li" v-for='(item,index) in exceptionModel' @click="abnormalReport(item)" :key='index'>
                    <div>
                        <p style='color:#8B8B8B'>
                            <div class="icon-container">
                                <Tooltip :content="item.description" placement="top" transfer>
                                    <c-icon
                                        :name="item.icon"
                                        align="middle"
                                        className="icon-ship"></c-icon>
                                </Tooltip>
                            </div>
                            <div class="text-unusual">{{item.text}}{{item.count}}</div>
                        </p>
                    </div>
                </li>

                <!-- 人员出入异常 -->
                <li class="access-unusual-ul-li" 
                    v-show="hasFaceAccessPermission" 
                    @click="openLeaveEnterAbnormalModal">
                    <div>
                        <p style='color:#8B8B8B'>
                            <div class="icon-container">
                                <Tooltip content="长时间未出门或频繁出入的人员" placement="top" transfer>
                                    <c-icon
                                        name="person-in-out-error"
                                        align="middle"
                                        className="icon-ship"></c-icon>
                                </Tooltip>
                            </div>
                            <div class="text-unusual">人员出入异常:{{leaveEnterCnt}}</div>
                        </p>
                    </div>
                </li>
            </ul>
        </div>

        <abnormalModal
        :abnormal="abnormal"
        @isVisible="isVisible"
        :exceptionName="exception_name"
        :exceptionType="exception_type">
        </abnormalModal>

        <privateProtocolModal
        :visible="isPrivateProtocolVisible"
         @on-close-protocol="closeProtocol"
        >
        </privateProtocolModal>

        <LeaveEnterAbnormalModal
            :visible="isLeaveEnterAbnormalVisible"
            @on-update="updateLeaveEnterAbnormalCnt"
            @on-close="closeLeaveEnterAbnormal">
        </LeaveEnterAbnormalModal>
    </div>
</template>

<script>
// import Cookies from 'js-cookie';
import { mapGetters } from 'vuex'
import util from '@/libs/util'
import filters from '@/filters'
import { http, api } from '@/libs/http'
import abnormalModal from './abnormalModal'
import privateProtocolModal from './private-protocol-modal'
import LeaveEnterAbnormalModal from './components/leave-enter-abnormal-modal'

export default {
  name: 'home_index',
  data () {
    return {
      exceptionModel: [
        {
          icon: 'lock-error',
          text: '门锁低电:',
          description: '门锁电量低于10%',
          count: 0,
          exception_type: '1001'
        },
        {
          icon: 'door-error',
          text: '长时间未开门:',
          description: '租期内，门锁超过指定时间(系统默认72小时)未打开',
          count: 0,
          exception_type: '1008'
        },
        {
          icon: 'error-offline',
          text: '异常离线:',
          description: '设备离线超过4小时',
          count: 0,
          exception_type: '1006'
        },
        {
          icon: 'ammeter-error',
          text: '电表欠费:',
          description: '电表付费模式为预付费且剩余电量为负',
          count: 0,
          exception_type: '3002'
        },
        {
          icon: 'over-insured',
          text: '设备过保:',
          description: '当前时间超过设备保修截止时间',
          count: 0,
          exception_type: '100'
        }
      ],
      active: 1,
      house: '',
      renter: '',
      device: '',
      value100: 0,
      abnormal: false,
      leaveEnterCnt: 0, // 人员出入异常数量
      isLeaveEnterAbnormalVisible: false, // 人员出入异常模态框状态
      isPrivateProtocolVisible: false,
      exception_type: '',
      exception_name: ''
      // hasFaceAccessPms: false, //有无门禁权限
    }
  },

  mounted () {
    const permission = localStorage.permission ? JSON.parse(localStorage.permission) : []
    const hasVerifyPrivacy = localStorage.is_verify_privacy ? localStorage.is_verify_privacy : this.isVerifyPrivacy
    // const is_verify_privacy = localStorage.is_verify_privacy === 'true' ? JSON.parse(localStorage.is_verify_privacy) : false
    if (permission['device_base']) {
      // 有查看设备异常的权限
      this.initExceptionCounts()
    }

    if (this.hasFaceAccessPermission) {
      this.loadLeaveEnterAbnormal()
    }
    this.isPrivateProtocolVisible = !hasVerifyPrivacy
  },

  watch: {
    hasFaceAccessPermission (newVal, oldVal) {
      if (newVal) {
        this.loadLeaveEnterAbnormal()
      }
    },
    isVerifyPrivacy (newVal) {
      if (localStorage.is_verify_privacy) {
        this.isPrivateProtocolVisible = false
      } else {
        this.isPrivateProtocolVisible = !newVal
      }
    }
  },

  methods: {
    date: filters.date,
    async initExceptionCounts () {
      try {
        const counts = await http.req(api.index_page_exception_counts, null, null)
        if (counts) {
          Object.keys(counts).forEach(exceptionCode => {
            const exceptionModelIndex = this.exceptionModel.findIndex(e => Number(e.exception_type) === Number(exceptionCode))
            if (exceptionModelIndex < 0) return
            this.$set(this.exceptionModel[exceptionModelIndex], 'count', Number(counts[exceptionCode]))
          })
        }
      } catch (err) {
        console.log(err)
      }
    },

    // 加载人员出入异常数据
    async loadLeaveEnterAbnormal () {
      try {
        const res = await http.req(api.face_access_get_exception_tenants)
        this.leaveEnterCnt = res && res.count ? res.count : 0
      } catch (err) {
        util.log('loadLeaveEnterAbnormal:', err)
      }
    },

    // 打开人员出入异常模态框
    openLeaveEnterAbnormalModal () {
      this.isLeaveEnterAbnormalVisible = true
    },

    // 关闭人员出入异常模态框
    closeLeaveEnterAbnormal () {
      this.isLeaveEnterAbnormalVisible = false
    },

    closeProtocol () {
      this.isPrivateProtocolVisible = false
    },

    // 更新人员出入异常数量
    updateLeaveEnterAbnormalCnt (cnt) {
      this.leaveEnterCnt = cnt
    },

    activeStatus (num) {
      this.active = num
    },

    abnormalReport (item) {
      if (!item.count) {
        return
      }
      this.exception_type = item.exception_type
      this.exception_name = item.text
      this.abnormal = true
    },

    searchHouse () {
      if (!this.house) {
        this.$Message.warning('请输入房源地址/小区/房源编号')
        return
      }
      // this.$store.commit('indexSearch',this.userForm2.input)
      this.$router.push({ path: 'tenancy-device', query: { input: this.house } })
    },
    searchRetenter () {
      if (!this.renter) {
        this.$Message.warning('请输入租客姓名/手机号')
        return
      }
      // this.$store.commit('indexSearch',this.userForm2.input)
      this.$router.push({ path: 'renter/index', query: { input: this.renter } })
    },
    searchDevice () {
      // this.$store.commit('indexSearch',this.hasFaceAccessPermissionForm2.input)
      this.$router.push({ path: 'rent-device/rent-device', query: { input: this.device } })
    },
    isVisible (val) {
      this.abnormal = val
    }
  },

  computed: {
    ...mapGetters(['hasFaceAccessPermission', 'isVerifyPrivacy'])
  },

  components: {
    abnormalModal,
    privateProtocolModal,
    LeaveEnterAbnormalModal
  }
}
</script>
<style lang="less">
@import '../../styles/common.less';
.clear-fix:after {
    content: '';
    display: table;
    clear: both;
}

.activeColor {
    color: #05bac5;
}
// .ivu-carousel-list {
//     width:80%;
//     margin:0 auto;
// }
.access {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    &-index {
        position: relative;
        background-color: rgb(19, 18, 24);
        &-search {
            width: 660px;
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            &-title {
                color: #fff;
                font-size: 16px;
                margin-bottom: 5px;
                cursor: pointer;
            }
        }
    }
    &-unusual {
        flex: 1;
        padding: 30px 0;
        text-align: center;
        &-ul {
            display: inline-block;
            box-shadow: 0 6px 8px 0 rgba(208, 208, 208, 0.5);
            overflow: hidden;
            &-li {
                list-style: none;
                width: 145px;
                height: 155px;
                background-color: #fff;
                border-right: 1px solid #eee;
                border-left: 1px solid #eee;
                background-color: #f8f8f9;
                float: left;
                position: relative;
                cursor: pointer;
            }
            &-li:hover {
                background-color: #fff;
            }
            &-li:nth-last-child(1) {
                border-right: none;
            }
            &-li:nth-child(1) {
                border-left: 0;
            }
        }
    }
    &-important {
        .ivu-carousel-list {
            padding-bottom: 20px;
        }
        &-list {
            text-align-last: left;
            height: 50px;
            line-height: 50px;
            width: 33.3333%;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            border-bottom: 1px dashed #bbbec4;
            padding-right: 40px;
            .ivu-tooltip-inner {
                white-space: normal;
                text-align: left;
            }
        }
    }
    .icon-unusual {
        font-size: 40px;
        display: block;
    }
    .icon-container {
        width: 100px;
        height: 112px;
        padding-top: 30px;
        margin: 0 auto;
    }
    .demo-carousel {
        padding: 0px 20px 20px 20px;
    }
}
.access-unusual-ul-li:hover {
    .icon-unusual {
        transition: all 0.3s ease;
        font-size: 50px;
    }
    .text-unusual {
        font-weight: bold;
    }
}
.access-important {
    .ivu-card-body {
        padding: 0 !important;
    }
}
.access-index-search-input {
    .ivu-btn-icon-only {
        padding: 5px 9px 2px 9px !important;
        border: none;
        width: auto;
        color: #fff;
    }

    .ivu-icon-ios-search-strong {
        width: 20px !important;
        font-size: 24px;
    }

    .ivu-input-group-append {
        background-color: #05bac5;
        border: none;
    }
}
</style>
